<template>
    <view>
        <view class="hpv-img">
            <image src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg" mode="aspectFill">
            </image>
        </view>
        <view class="tab-view">
            <view class="tab" v-for="(item,index) in hpvBar" :key="index" @click="chooseBar(index,item._id)">
                <text class="tab-item">{{item.name}}</text>
                <text :class=" selectBar==index ? 'select' :''"></text>
            </view>
        </view>
        <view class="hpvDetail" v-for="(item,index) in  hpv_part" :key="index">
            <view class="title">{{item.name}}</view>
            <view class="flex-r-dric ">
                <view class="dric" v-for="(dric,index) in item.describe" :key="index">{{dric}}</view>
            </view>
            <view class="flex-r-appo"><text class="price">￥{{item.price[0]}}-￥{{item.price[1]}}</text> <text class="btn"
                    @click="toGet(item)">去预约</text></view>
        </view>
        <view style="height:300rpx "></view>
        <!-- <gj/> -->
        <point :show="show" title="无数据" />
    </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import RequestApi from '@/public/request'
import { hpvbar, hpvDatadetail } from '@/public/decl-type'
import point from '@/pages/common/point.vue'
import gj from '@/pages/common/gj.vue'
let hpvBar = ref<hpvbar[]>([]);
let show = ref<boolean>(false)
//hpv所有信息
let hpvDatadetails = ref<hpvDatadetail[]>([])
//hpv选中信息列表
let hpv_part = ref<hpvDatadetail[]>([])
//控制hpvBar选中样式
let selectBar = ref<number>(0);
//去预约
function toGet(item: hpvDatadetail) {
    const datas = JSON.stringify(item)
    uni.navigateTo({
        url: `/pages/hpvDetail/index?data=${datas}`
    })
}
function chooseBar(index: number, id: string) {
    selectBar.value = index;
    if (id == '26da8e4962dc565503df9629704f1700') {
        hpv_part.value = hpvDatadetails.value;
        return;
    }
    hpv_part.value = hpvDatadetails.value.filter((item) => {
        return item.hpv_id == id
    });
    hpv_part.value.length > 0 ? show.value = false : show.value = true;
}
onMounted(() => {
    RequestApi.outHpv().then((res: any) => {
        hpvBar.value = res.data.data[0].hpv_select;
        hpvDatadetails.value = res.data.data[0].hpv_list;
        hpv_part.value = res.data.data[0].hpv_list;
    })
})
</script>
<style>
page {
    background-color: #fafafa !important;
}
</style>
<style lang="scss" scoped >
.hpv-img image {
    width: 100%;
}

.tab-view {
    display: flex;
    padding-top: 25rpx;
    justify-content: space-around;
    background-color: #ffffff;
}

.tab {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .tab-item {
        margin-bottom: 20rpx;
    }

    .select {
        width: 60rpx;
        height: 10rpx;
        background-color: #0d7cff;
        // border: 2px solid #0d7cff;
    }
}

.hpvDetail {
    display: flex;
    flex-direction: column;

    padding: 15rpx 15rpx 10rpx 22rpx;
    margin: 10rpx;
    border-radius: 15rpx;
    background-color: #ffffff;

    &>view {
        margin-bottom: 15rpx;
    }

    .title {
        font-size: 35rpx;
    }

}

.flex-r-dric {
    display: flex;
    align-items: center;

    .dric {
        padding: 8rpx 8rpx;
        margin-right: 6rpx;
        background-color: #f4f6fa;
        font-size: 25rpx;
    }
}

.flex-r-appo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .price {
        color: #ff5f2c;
        font-size: 25rpx;
    }

    .btn {
        padding: 15rpx 25rpx;
        background-color: #0d7cff;
        border-radius: 5%;
        color: aliceblue;
        font-size: 26rpx;
    }
}
</style>